<template>
    <!-- 11屠宰信息 -->
    <table style="width:100%;font-size: 15px;">
        <tr>
            <td>
                <h2>屠宰信息</h2>
            </td>
            <td> <el-button @click="addbutcherInfo">设置</el-button></td>
        </tr>
        <tr>
            <td>批次：{{ butcherInfo.batchCode }}</td>
            <td>到厂均重：{{ butcherInfo.counterPoise }}公斤</td>
        </tr>
        <tr>
            <td>到场时间：{{ butcherInfo.attendTime }}</td>
            <td>屠宰时间：{{ butcherInfo.butcherTime }}</td>
        </tr>


    </table>
    <!-- 屠宰信息弹出框 对话框 -->
    <el-dialog v-model="dialogVisible" title="屠宰信息" width="500" :before-close="handleClose">
        <span>

            <el-form :model="butcherInfo" label-width="120px">
                <el-form-item label="批次">
                    <el-input v-model="butcherInfo.batchCode" />
                </el-form-item>
                <el-form-item label="到场均重(公斤)">
                    <el-input v-model="butcherInfo.counterPoise" />
                </el-form-item>
                <el-form-item label="到厂时间">
                    <el-date-picker type="datetime" v-model="butcherInfo.attendTime" />
                </el-form-item>
                <el-form-item label="屠宰时间">
                    <el-date-picker type="datetime" v-model="butcherInfo.butcherTime" />
                </el-form-item>



            </el-form>



        </span>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="UpdateButcherInfo">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <br>

    <h5>相关资质</h5>
    <hr />
    <el-upload v-model:file-list="fileList" action="http://localhost:5240/api/SourceList/Upload"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
        :on-success="handleAvatarSuccess">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisibleimages">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

    <!-- 屠宰信息-企业信息 -->
    <h5>企业信息</h5>
    <hr />
    <table style="width:100%;font-size: 15px;">
        <tr>
            <td>

            </td>
            <td> <el-button @click="UpdateBusiness">设置</el-button></td>
        </tr>


        <tr>
            <td>公司名称：{{ butcherBusinessinfo.businessName }}</td>
            <td v-if="butcherBusinessinfo.businessBuild">成立时间：{{ butcherBusinessinfo.businessBuild.substring(0, 10) }}
            </td>
        </tr>
        <tr>
            <td>公司地址：
                {{ GetProvinceinfoname }}
                {{ GetCityinfoname }}
                {{ GetCountyinfoname }}
                <!-- <span v-for="item in ProvinceinfoList" v-if="item.provinceCode == butcherBusinessinfo.province">{{
                item.provinceName }}</span> -->

                <!-- <span>{{ butcherBusinessinfo.province }}</span>
                <span>{{ butcherBusinessinfo.city }}</span>
                {{ butcherBusinessinfo.county }} -->


            </td>

        </tr>
        <tr>
            <td>公司简介：{{ butcherBusinessinfo.businessIntro }}</td>

        </tr>

    </table>
    <!-- 屠宰信息-企业设置 对话框 -->
    <el-dialog v-model="dialogVisibleBusiness" title="企业设置" width="500" :before-close="handleClose">
        <span>

            <el-form :model="butcherBusinessinfo" label-width="120px">
                <el-form-item label="公司名称">
                    <el-input v-model="butcherBusinessinfo.businessName" />
                </el-form-item>
                <el-form-item label="公司地址">
                    <!-- 省 -->
                    <el-select v-model="butcherBusinessinfo.province" @change="GetCityinfo(), GetCountyinfo()">
                        <el-option v-for="item in ProvinceinfoList" :value="item.provinceCode"
                            :label="item.provinceName"></el-option>
                    </el-select>
                    <!-- 市 -->
                    <el-select v-model="butcherBusinessinfo.city" @change="GetCountyinfo()">
                        <el-option v-for="item in CityinfoList" :value="item.cityCode"
                            :label="item.cityName"></el-option>
                    </el-select>
                    <!-- 县 -->
                    <el-select v-model="butcherBusinessinfo.county">
                        <el-option v-for="item in CountyinfoList" :value="item.countyCode"
                            :label="item.countyName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="成立时间">
                    <el-input type=date v-model="butcherBusinessinfo.businessBuild" />
                </el-form-item>
                <el-form-item label="公司简介">
                    <el-input v-model="butcherBusinessinfo.businessIntro" />
                </el-form-item>


            </el-form>


        </span>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="UpdateButcherbusiness">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <br>
    <!-- 屠宰企业-企业照片 -->
    <h5>企业照片</h5>
    <hr />
    <el-upload v-model:file-list="fileListbutcher" action="http://localhost:5240/api/SourceList/Upload"
        list-type="picture-card" :on-preview="handlePictureCardPreviewbutcher" :on-remove="handleRemovebutcher"
        :on-success="handleAvatarSuccessbutcher">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisibleimagesbutcher">
        <img w-full :src="dialogImageUrlbutcher" alt="Preview Image" />
    </el-dialog>


</template>

<script setup lang="ts">
import { ref, inject, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'
import { type AxiosStatic } from 'axios'

///import SourceDetail from '../SourceMan/SourceDetail.vue'

//接收父页面的值  butcherbusiness
const parentData = defineProps({
    parentData: {
        type: String,
        default: ''
    }
})

console.log(parentData)


import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'


const dialogVisible = ref(false)

const axios = inject('axios') as AxiosStatic
const router = useRouter()
const route = useRoute()
const dialogVisibleBusiness = ref(false)//设置养殖信息企业信息对话框
const id = route.query.id;

//生命周期函数
onMounted(() => {
    GetButcherInfoById()
    GetImgList(3)
    GetProvinceinfos()
    GetCityinfo()
    GetCountyinfo()
    GetButcherbusinessById()
    GetbutcherImgList(4)
})

//#region  屠宰信息设置


//定义屠宰信息实体
const butcherInfo = ref({
    //  "butcherId": 0,
    "sourceId": 0,
    "batchCode": "",
    "counterPoise": 0,
    "attendTime": "",
    "butcherTime": ""
})

//根据id反填屠宰信息
//加载养殖信息 SourceList/GetBreedinfoById
const GetButcherInfoById = () => {
    //获取数据
    axios.get('SourceList/GetButcherInfoById?id=' + id).then((res) => {
        console.log(res.data)
        if (res.data.data != null) {
            butcherInfo.value = res.data.data
        }

    })
}



//设置屠宰信息
const addbutcherInfo = () => {
    dialogVisible.value = true;

}
//保存
const UpdateButcherInfo = () => {
    butcherInfo.value.sourceId = id


    axios.post('/SourceList/UpdateButcherInfo', butcherInfo.value).then(res => {
        if (res.data.data == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            dialogVisible.value = false;
            //刷新页面
            GetButcherInfoById()
        }
        else {
            ElMessage({
                message: '保存失败',
                type: 'error',
            })
        }
    })
}
//关闭弹框
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定关闭吗？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const dialogImageUrl = ref('')
const dialogVisibleimages = ref(false)
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisibleimages.value = true
}
//图片上传方法
const handleAvatarSuccess = (val: any) => {
    imagesinfo.value.url = val//
    AddImages(3)
}

//上传图片
const fileList = ref([])
//反填动检证图片信息
const GetImgList = (val: any) => {
    //获取数据
    axios.get('SourceList/GetImgList', {
        params: {
            SourceId: id,
            TraceType: 1,
            ImgType: val,
        }
    }).then((res) => {
        //  console.log(res.data)
        if (res.data.data != null) {

            //  imagesList.value = res.data.data
            //  dialogImageUrl.value = res.data.data
            res.data.data.forEach((item: any) => {
                fileList.value.push({
                    name: 'http://localhost:5240' + item.url,
                    url: 'http://localhost:5240' + item.url,
                    id: item.id
                })



            })
        }
        console.log(fileList.value)
    })

}


//移除图片
const handleRemove = (val: any) => {
    DelImages(val.id)//动检证删除
}

//添加图片表
const imagesinfo = ref({
    //  "id": 0,
    "sourceId": 0,
    "traceType": 0,
    "imgType": 0,
    "url": ""
})
const AddImages = (val: any) => {
    imagesinfo.value.sourceId = id;
    imagesinfo.value.traceType = 1;
    imagesinfo.value.imgType = val;

    axios.post('/SourceList/AddImages', imagesinfo.value).then(res => {
        if (res.data.code == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            GetButcherInfoById()
            dialogVisible.value = false

        } else {
            ElMessage.error('添加失败')
            return;

        }
    })
}
//图片删除
const DelImages = (val: any) => {
    axios.post('/SourceList/DelImages?id=' + val).then(res => {
        if (res.data.data == 1) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            GetButcherInfoById()//刷新页面
        } else {
            ElMessage.error('删除失败')
            return;

        }
    })
}

//#endregion

//#region  屠宰信息--企业信息 企业照片
//定义企业实体
const butcherBusinessinfo = ref({

    //"butcherBusinessId": 0,
    "sourceId": '',
    "businessName": "",
    "province": '',//省
    "city": '',//市
    "county": '',//县
    "businessBuild": "",
    "businessIntro": ""
})

//反填企业信息 GetButcherbusinessById
const GetButcherbusinessById = () => {
    axios.get('/SourceList/GetButcherbusinessById', {
        params: {
            id: id
        }
    }).then(res => {
        console.log(res.data)
        if (res.data.data != null) {
            butcherBusinessinfo.value = res.data.data
            butcherBusinessinfo.value.businessBuild = res.data.data.businessBuild.substring(0, 10)

            butcherBusinessinfo.value.province = res.data.data.province
            GetProvinceinfos()
            butcherBusinessinfo.value.city = res.data.data.city
            GetCityinfo()
            butcherBusinessinfo.value.county = res.data.data.county
            GetCountyinfo()

        }
    })
}
//设置屠宰信息--企业信息
const UpdateBusiness = () => {
    dialogVisibleBusiness.value = true
    GetButcherbusinessById()

}





//设置省市县
var ProvinceinfoList = ref([])
var CityinfoList = ref([])
var CountyinfoList = ref([])
//省
const GetProvinceinfos = () => {
    axios.get('/SourceList/GetProvinceinfos').then(res => {
        if (res.data.data != null) {
            ProvinceinfoList.value = res.data.data
        }
    })
}

//市

const GetCityinfo = () => {
    var ProvinceCode = butcherBusinessinfo.value.province

    /// alert("省编号"+ProvinceCode)
    axios.get('/SourceList/GetCityinfo', {
        params: {
            ProvinceCode: ProvinceCode
        }
    }).then(res => {
        if (res.data.data != null) {
            CityinfoList.value = res.data.data
        }
    })
}

//县

const GetCountyinfo = () => {
    var CityCode = butcherBusinessinfo.value.city
    //alert("市编号"+CityCode)
    axios.get('/SourceList/GetCountyinfo', {
        params: {
            CityCode: CityCode
        }
    }).then(res => {
        if (res.data.data != null) {

            CountyinfoList.value = res.data.data
        }
    })
}



//设置企业信息
const UpdateButcherbusiness = () => {
    butcherBusinessinfo.value.sourceId = id;
    // butcherBusinessinfo.value.city=




    axios.post('/SourceList/UpdateButcherbusiness', butcherBusinessinfo.value).then(res => {
        if (res.data.data == 1) {
            ElMessage({

                message: '保存成功',
                type: 'success',
            })

            dialogVisibleBusiness.value = false
            GetButcherbusinessById()//刷新页面

        } else {
            ElMessage.error('添加失败')
            return;

        }
    })
}

//计算属性反填省市县
const GetProvinceinfoname = computed(() => {
    var ProvinceCode = butcherBusinessinfo.value.province
    var ProvinceName = ''
    ProvinceinfoList.value.forEach((item: any) => {
        if (item.provinceCode == ProvinceCode) {
            ProvinceName = item.provinceName
        }
    })
    return ProvinceName
})

const GetCityinfoname = computed(() => {
    var CityCode = butcherBusinessinfo.value.city
    //  console.log(CityCode)
    var CityName = ''
    CityinfoList.value.forEach((item: any) => {
        if (item.cityCode == CityCode) {
            CityName = item.cityName
        }
    })
    // console.log(CityName)
    return CityName
})

const GetCountyinfoname = computed(() => {
    var CountyCode = butcherBusinessinfo.value.county
    var CountyName = ''
    CountyinfoList.value.forEach((item: any) => {
        if (item.countyCode == CountyCode) {
            CountyName = item.countyName
        }
    })
    return CountyName
})







//屠宰信息-企业照片
const handlePictureCardPreviewbutcher: UploadProps['onPreview'] = (uploadFile) => {
    //  dialogImageUrl.value = uploadFile.url!
    dialogVisibleimagesbutcher.value = true
}


const dialogVisibleimagesbutcher = ref(false)
const dialogImageUrlbutcher = ref('')


//图片上传方法
const handleAvatarSuccessbutcher = (val: any) => {
    imagesinfo.value.url = val//
    AddImages(4)
}

//上传图片
const fileListbutcher = ref([])
//反填动检证图片信息
const GetbutcherImgList = (val: any) => {
    //获取数据
    axios.get('SourceList/GetImgList', {
        params: {
            SourceId: id,
            TraceType: 1,
            ImgType: val,
        }
    }).then((res) => {
        //  console.log(res.data)
        if (res.data.data != null) {

            //  imagesList.value = res.data.data
            //  dialogImageUrl.value = res.data.data
            res.data.data.forEach((item: any) => {
                fileListbutcher.value.push({
                    name: 'http://localhost:5240' + item.url,
                    url: 'http://localhost:5240' + item.url,
                    id: item.id
                })



            })
        }

    })

}


//移除图片
const handleRemovebutcher = (val: any) => {
    DelImages(val.id)//动检证删除
}

//#endregion






</script>